<template>
    <base-card>
        <div>
            <span>{{ modifiedData._id ? '编辑项目' : '新增项目' }}</span>
        </div>
        <p>服务项目信息</p>

        <el-form :inline="true" :model="modifiedData">
            <el-form-item label="项目名称">
                <el-input v-model="modifiedData.name" placeholder="请输入" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item label="服务次数">
                <el-input v-model="modifiedData.count" placeholder="请输入" clearable style="width: 250px;" />
            </el-form-item>

            <el-form-item label="服务类型">
                <el-select v-model="modifiedData.type" placeholder="请选择" clearable style="width: 250px;">
                    <el-option label="全部" value="全部" />
                    <el-option label="付费项目" value="付费项目" />
                    <el-option label="免费项目" value="免费项目" />
                </el-select>
            </el-form-item>
            <el-form-item label="服务原价">
                <el-input v-model="modifiedData.price" placeholder="请输入" clearable style="width: 250px;" />
            </el-form-item>
            <el-form-item label="服务介绍">
                <el-input v-model="modifiedData.intro" placeholder="请输入" clearable style="width: 250px;" type="textarea"
                    class="words" />
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="addModifications">保存</el-button>
        <el-button @click="this.$router.go(-1);">返回</el-button>
    </base-card>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { addProjectApi, reviseProjectApi } from '../../api/projectManage';
import { useRoute } from 'vue-router';
const route = useRoute();

const modifiedData = reactive({
    name: "",
    count: "",
    type: "",
    price: "",
    intro: "",
    _id: route.params._id
})



function addModifications() {
    if (modifiedData._id) {
        reviseProject()
    } else {
        addServiceItem()
    }


}



function addServiceItem() {
    addProjectApi({ ...modifiedData }).then((res) => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
        }
    })
}

//修改
function reviseProject(id) {
    reviseProjectApi({
        ...modifiedData,
        _id: modifiedData._id
    }).then((res) => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
        }
    })
}


</script>

<style scoped lang="scss">
label {
    width: 70px;
    height: 32px;
    font-size: 13px;
    color: #999999;
}

.el-input {
    width: 200px;
    height: 40px;
}

.el-input::v-deep .el-input__inner::placeholder {
    color: #ccc;
}

.words {
    width: 582px;
    height: 120px;
}

.el-form-item {
    margin-top: 10px;
}
</style>